<template>
	<view>
		<uv-sticky>
			<view class="fixed_head_box">
				<uv-input v-model="keywords" placeholder="请输入想要搜索的品种" customStyle="border-radius: 20rpx;"
				 prefixIcon="search"  prefixIconStyle="font-size: 24px;color: #909399;" @confirm="searchHotKeywords(keywords)"></uv-input>
			</view>
		</uv-sticky>
		<view class="pzList">
			<view class="pzList-left">
				宠物品种
			</view>
			<view class="pzList-right">
				<view class="pzList-one" :class="numname == item.name ? 'active' : ''" v-for="item in pzList" @click="getPz(item)">
					<image style="width: 60rpx;height: 60rpx;" v-if="numname == item.name" :src="item.Imageurl" mode=""></image>
					<image style="width: 60rpx;height: 60rpx;" v-else :src="item.Imageurl1" mode=""></image>
				</view>
			</view>
			
		</view>
		<view class="list">
			<view class="list-box" v-for="item in dataList" @click="gopath(item)">
				<view class="list-image"><image :src="item.jsonViewData.cover" ></image></view>
				<view class="list-flex">
					<view class="" style="display: flex;">
						<view class="list-name">{{ item.jsonViewData.name }}</view>
						<view class="" style="padding-left: 5rpx;">
							<image v-if="numname=='猫'" style="width: 30rpx;height: 30rpx;" src="../../../static/221.png" mode=""></image>
							<image v-if="numname=='狗'" style="width: 30rpx;height: 30rpx;" src="../../../static/222.png" mode=""></image>
						</view>
					</view>
					<view class="">
						<view class="list-names">{{ item.jsonViewData.introduce }}</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
import { searchPlugsDataList } from '../../../utils/api.js';
export default {
	data() {
		return {
			keywords: '',
			numname: '猫',
			pzList: [
				{
					id: 1,
					name: '猫',
					Imageurl:'../../../static/223.png',
					Imageurl1:'../../../static/224.png'
				},
				{
					id: 2,
					name: '狗',
					Imageurl:'../../../static/225.png',
					Imageurl1:'../../../static/226.png'
				}
			],
			dataList: [],
			page: 1,
			total: 0
		};
	},
	onShow() {
		this.page = 1
		this.dataList = [];
		this.getlist();
	},
	onReachBottom() {
		console.log(123);
		if (this.dataList.length < this.total) {
			this.page++;
			console.log(this.page);
			this.getlist();
		}
	},
	methods: {
		getlist() {
			let data = {
				page: this.page,
				size: 10,
				adminId: 142,
				keyword: this.keywords ? this.keywords : this.numname,
				userServiceToken: this.userToken,
				plugsId: 189
			};
			searchPlugsDataList(data).then(res => {
				if (res.code == 200) {
					// this.dataList=res.body
					if (this.page == 1) {
						this.dataList = [];
					}
					let arr = [];
					arr = this.dataList.concat(res.body.list);
					this.dataList = arr;
					this.dataList.forEach(item => {
						if (typeof item.extJson === 'string') {
							item.extJson = JSON.parse(item.extJson);
						}
					});

					this.total = res.body.total;
					this.keywords=''
				}
			});
		},
		searchHotKeywords(){
			this.getlist();
		},
		getPz(item) {
			this.numname = item.name;
			this.page=1
			this.dataList=[]
			this.getlist();
		},
		gopath(item){
			console.log(this.numname);
			uni.navigateTo({
				url:`/pages/index/lingyang/lyDetails?info=${encodeURIComponent(JSON.stringify(item))}&cateName=${this.numname}`,
			})
		}
	}
};
</script>

<style lang="scss">
page {
	padding:20rpx 32rpx ;
	box-sizing: border-box;
}
.fixed_head_box {
	background-color: #fff;
}
.pzList {
	padding: 20rpx 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.pzList-left{
		font-size: 28rpx;
		font-weight: 700;
	}
	.pzList-right{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		.pzList-one {
			padding: 10rpx 15rpx;
			background-color: #fff;
			border: 1rpx solid #e8e8e8;
			color: #666;
			margin-left: 20rpx;
			border-radius: 20rpx;
		}
		.active {
			color: #fff;
			background-color: #F54319;
		}
	}
	
}
.list{
	display: flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-items: center;
	margin-top: 20rpx;
	.list-box{
		margin-bottom: 30rpx;
		width: 330rpx;
		height: 420rpx;
		border-radius: 32rpx 0rpx 32rpx 32rpx;
		background-color: #666;
		box-shadow: 0rpx 8rpx 34rpx 0rpx rgba(48, 49, 52, 0.1);
		position: relative;
		.list-image{
			width: 330rpx;
			height: 420rpx;
			border-radius: 32rpx 0rpx 32rpx 32rpx;
				image{
					width: 330rpx;
					height: 420rpx;
					border-radius: 32rpx 0rpx 32rpx 32rpx;
				}
		}
		.list-flex{
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 330rpx;
			height: 130rpx;
			border-radius: 32rpx 0rpx 32rpx 32rpx;
			opacity: 1;
			background: rgba(0, 0, 0, 0.1);
			padding: 20rpx;
			box-sizing: border-box;
			.list-name{
				font-size: 24rpx;
				font-weight: 700;
				color: #fff;
			}
			.list-names{
				padding-top: 6rpx;
				font-size: 22rpx;
				color: #fff;
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
				-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
				-webkit-line-clamp: 1; //一个块元素显示的文本的行数
				overflow: hidden; //溢出隐藏
			}
		}
		
	}
}
</style>
